<template>
	<div>
		<!-- 搜索表单 -->
		<yd-form ref="myForm" :options="formOptions" :model="formData" :btns="formBtns" @form-init="handleFormInited">
			<template #form-btn="props">
				<div>
					<el-button class="yd-form-btn" type="primary" @click="handleSearch(props.model)">查询</el-button>
				</div>
			</template>
		</yd-form>
		<!-- 列表 -->
		<yd-table
			:formData="formData"
			:tableConfig="tableConfig"
			:tableData="tableData"
			@sizeChangeHandler="handleSearch"
			@currentChangeHandler="handleSearch"
			@sortChangeHandler="handleSearch"
			@selectionChangeHandler="handleSelectionChange"
		></yd-table>
		<!-- 新增或修改弹出层 -->
		<el-dialog v-model="dialog.addOrEdit.open" :title="dialog.addOrEdit.title" width="600px" append-to-body center>
			<el-form ref="addOrEditForm" :model="dialog.addOrEdit.form" :rules="dialog.addOrEdit.rule" label-width="120px">
				<el-form-item label="单位编码" prop="orgCode">
					<el-input v-model="dialog.addOrEdit.form.orgCode" placeholder="请输入单位编码" maxlength="32" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="单位名称" prop="orgName">
					<el-input v-model="dialog.addOrEdit.form.orgName" placeholder="请输入单位名称" maxlength="100" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="描述" prop="remarks">
					<el-input
						v-model="dialog.addOrEdit.form.remarks"
						type="textarea"
						:rows="3"
						placeholder="请输入描述"
						maxlength="150"
						show-word-limit
					></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button type="primary" :loading="dialog.addOrEdit.btnLoading" @click="handleSubmit()">确 定</el-button>
				<el-button @click="dialog.addOrEdit.open = false">取 消</el-button>
			</template>
		</el-dialog>

		<!-- 导入弹出层 -->
		<el-dialog
			:key="dialog.imp.key"
			v-model="dialog.imp.open"
			:title="dialog.imp.title"
			width="500px"
			:close-on-click-modal="false"
			append-to-body
			center
			@closed="dialog.imp.key -= 1"
		>
			<div style="text-align: center">
				<el-upload
					:ref="dialog.imp.ref"
					:headers="dialog.imp.headers"
					action="/management/mp/organization/external/import"
					:data="{}"
					drag
					:auto-upload="false"
					accept=".xls,.xlsx"
					:limit="dialog.imp.limit"
					:before-upload="handleBeforeUpload"
					:on-progress="handleUploadOnProgress"
					:on-exceed="handleUploadOnExceed"
					:on-success="handleUploadOnSuccess"
					:on-error="handleUploadOnError"
				>
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				</el-upload>
			</div>
			<template #footer>
				<el-button :loading="dialog.imp.downloadTemplateBtnLoading" type="primary" @click="downloadTemplate('外部单位导入模板')">下载模板</el-button>
				<el-button :loading="dialog.imp.importSubmitBtnLoading" type="primary" @click="handleImport">确 定</el-button>
				<el-button @click="dialog.imp.open = false">取 消</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import Curd from '@/views/management/middle-platform/curd';
import { page, save, updateById, removeByIds, downloadTemplate } from '@/api/middle-platform/conf-external-organization';

export default {
	name: 'ConfExternalOrganization',
	mixins: [Curd],
	data() {
		return {
			// 接口
			api: {
				query: page,
				add: save,
				edit: updateById,
				remove: removeByIds,
				downloadTemplate: downloadTemplate,
			},
			// 下拉选项
			options: {},
			// 搜索表单
			formData: {
				pageSize: 10,
				pageNum: 1,
			},
			formOptions: [
				{
					type: 'input',
					prop: 'orgName',
					label: '单位名称',
					attrs: {
						clearable: true,
					},
				},
			],
			formBtns: [],
			tableConfig: {
				columns: [
					{
						label: '单位编码',
						prop: 'orgCode',
						width: 200,
					},
					{
						label: '单位名称',
						prop: 'orgName',
					},
					{
						label: '描述',
						prop: 'remarks',
					},
				],
				// 分页
				pagination: {
					pageNum: 1,
					total: 0,
				},
				// 加载层
				loading: false,
				// 启用复选框
				enableSelection: true,
				// 工具栏
				toolBar: [
					{ name: '新增', icon: 'yd-icon-plus', handler: () => this.handleAdd() },
					{ name: '修改', icon: 'yd-icon-edit', disable: 'single', handler: () => this.handleEdit() },
					{ name: '删除', icon: 'yd-icon-delete', disable: 'multiple', handler: () => this.handleDelete() },
					{ name: '导入', icon: 'yd-icon-import', handler: () => this.handleImport() },
				],
			},
			tableData: [],
		};
	},
	created() {
		// 设置校验规则
		this.dialog.addOrEdit.rule = {
			orgCode: [{ required: true, message: '单位编码不能为空', trigger: 'blur' }],
			orgName: [{ required: true, message: '单位名称不能为空', trigger: 'blur' }],
		};
	},
};
</script>

<style scoped></style>
